<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Vue 3 Right-Click Menu Demo</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				padding: 20px;
			}
			.right-click-menu {
				position: fixed;
				background: #fff;
				border: 1px solid #ccc;
				box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
				list-style: none;
				padding: 0;
				margin: 0;
				z-index: 1000;
			}
			.right-click-menu li {
				padding: 8px 15px;
				cursor: pointer;
			}
			.right-click-menu li:hover {
				background-color: #f0f0f0;
			}
			.btn {
				width: 200px;
				height: 37px;
				border-radius: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div
				style="width: 200px; height: 60px"
			>
				<p @contextmenu.prevent="showMenu($event)" class="btn">右键点击此处显示菜单</p>
			</div>

			<ul class="right-click-menu" :style="menuStyle" v-show="isMenuVisible">
				<li @click="handleMenuAction('Copy')">复制</li>
				<li @click="handleMenuAction('Cut')">剪切</li>
				<li @click="handleMenuAction('Paste')">粘贴</li>
			</ul>
		</div>

		<script src="https://unpkg.com/vue@3.4.17/dist/vue.global.prod.js"></script>
		<script>
			const { createApp, ref } = Vue;

			createApp({
				setup() {
					const isMenuVisible = ref(false);
					const menuStyle = ref({ top: '0px', left: '0px' });

					const showMenu = event => {
						event.stopPropagation(); // 阻止事件冒泡
						isMenuVisible.value = true;
						menuStyle.value = {
							top: `${event.clientY}px`,
							left: `${event.clientX}px`,
						};
					};

					const hideMenu = () => {
						isMenuVisible.value = false;
					};

					const handleMenuAction = action => {
						alert(`你选择了: ${action}`);
						hideMenu();
					};

					// 隐藏菜单，当点击其他地方时
					window.addEventListener('click', hideMenu);

					return {
						isMenuVisible,
						menuStyle,
						showMenu,
						handleMenuAction,
					};
				},
			}).mount('#app');
		</script>
	</body>
</html>
